<template>
  <div class="login-wp">
    <header class="bar bar-nav">
      <a
        class="button button-link button-nav pull-left goBack"
        href="javascript:window.history.go(-1);"
      >
        <span class="iconfont icon-sort_desc"></span>
      </a>
      <h1 class="title title-white unBorder">注册</h1>
    </header>
    <div class="content content-padded">
      <input type="hidden" name id="message" />
      <article class="card">
        <div class="card-header">
          <div class="lr-header">欢迎来到唯实教育学习系统</div>
        </div>
        <div class="card-content lr__wrap">
          <div class="card-content-inner">
            <div class="list-block">
              <ul class="lr-content__wrap">
                <li>
                  <div>
                    <div class="item-input form-control pr">
                      <span class="lr-tel-ico new-tel-ico">
                        <em class="iconfont icon-shoujidenglu"></em>
                      </span>
                      <input
                        type="text"
                        style="outline: none;"
                        id="account"
                        v-model="logonObj.loginName"
                        placeholder="请输入用户账号"
                      />
                    </div>
                  </div>
                </li>
                <li>
                  <div>
                    <div class="item-input form-control pr">
                      <span class="lr-tel-ico new-tel-ico">
                        <em class="iconfont icon-mima"></em>
                      </span>
                      <input
                        type="text"
                        style="outline: none;"
                        v-model="logonObj.passWord"
                        id="accoun"
                        placeholder="请输入用户密码"
                      />
                    </div>
                  </div>
                </li>
                <li>
                  <div>
                    <div class="item-input form-control pr">
                      <span class="lr-tel-ico new-tel-ico">
                        <em class="iconfont icon-mima"></em>
                      </span>
                      <input
                        type="text"
                        style="outline: none;"
                        id="acoun"
                        v-model="logonObj.loginKey"
                        placeholder="请输入确认密码"
                      />
                    </div>
                  </div>
                </li>
                <li>
                  <div class="clearfix">
                    <aside
                      class="pull-left register-ft__wrap"
                      style="display: flex;align-items: center;"
                    >
                      <label
                        style=" width: 0.72rem;height: 0.39rem;"
                        class="label-switch label-switch-small"
                      >
                        <input
                          type="checkbox"
                          v-model="logonObj.isTrue"
                          value="1"
                          id="noticeOfRegistration"
                        />
                        <div class="checkbox"></div>
                      </label>
                      <span style="font-size:0.2rem;text-indent: 0.1rem;">我已阅读并同意</span>
                      <a class="lr-links" href="javascript:;">《用户注册协议》</a>
                    </aside>
                  </div>
                </li>
              </ul>
              <div class="content-block">
                <div class="lr-suBtn__wrap">
                  <button class="button button-big button-round" @click="logonClk">注册，进入唯实课堂</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </article>
    </div>
  </div>
</template>

<script>
import { Toast, Notify } from "vant";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      logonObj: {}
    };
  },
  methods: {
    ...mapActions("login", ["getLogon", "resetToken"]),
    gotoLogon() {
      this.$router.push("/login");
    },
    logonClk() {
      if (!this.logonObj.isTrue) {
        Toast("请您再阅读注册协议后同意并勾选");
        return;
      }
      if (!this.logonObj.loginName) {
        Toast("请您填写用户账号");
        return;
      }
      if (!this.logonObj.passWord) {
        Toast("请您填写用户密码");
        return;
      }
      if (this.logonObj.passWord != this.logonObj.loginKey) {
        Toast("两次密码不一致");
        return;
      }
      this.getLogon(this.logonObj);
      Notify({ type: "success", message: "注册成功" });
      this.resetToken();
      setTimeout(() => {
        Notify.clear("success");
        this.gotoLogon();
      }, 1000);
    }
  },
  components: {
    vanToast: Toast
  }
};
</script>
<style scoped src="../.././css/main.css"></style>
<style scoped src="../.././css/login/icon/iconfont.css"></style>
<style scoped src="../.././css/login/index.css"></style>
<style scoped>
</style>